티스토리 뷰

Programming Tips/Web Programming

[Javascript] AJAX 비동기로 파일 첨부하기 (IE도 지원하게 만들기)

Unikys 2012. 10. 10. 16:48


* 이전에 AJAX로 XMLHttpRequest에 파일을 첨부하는 방법을 쓴적이 있다.


2012/10/05 - [Programming/Web Programming] - [Javascript] AJAX (XMLHttpRequest)로 비동기적으로 파일 업로드하기


: 맨날 크롬만 쓰니까 테스트를 하니까 잘 동작하길래 넘어갔는데, 이게 왠걸, Internet Explorer (이하 IE)에서는 돌아가지 않는 것이다. 이놈의 IE 또 무엇이 말썽인건가?!


: 개발자 도구를 통해서 확인하니 uploadFile.files가 undefined랜다. 게다가 FormData도 없댄다..헐. 도대체 이것들은 있기는 한가?!


http://msdn.microsoft.com/en-us/library/ie/hh772723(v=vs.85).aspx


: IE 10에 나온다고 한다. 이런.. 그럼 이전에 짰던 소스는 IE에서는 아예 안돌아간다고 봐도 될것이다. 웹 프로그래밍의 최대의 적은 언제나 IE이다. HTML5의 풍성한 기능들을 마음껏 이용하지 못하는게 다 IE 때문이다.


: 각설하고 위의 비동기적으로 파일을 첨부하는 것을 IE에서도 해결해야하는 방법을 찾아야 할 것이다. 현재 cross-browser를 표방하고 있는 jquery에서 해결하는 방법을 따라해볼 것이다. 이들이 사용하는 방법은 바로 '숨겨진 iframe 이용하기' 이다.


: 개념은 이렇다. 현재 페이지의 파일은 form으로 둘러싸고, iframe을 하나 숨겨둔다. 그리고 파일을 선택하고나서 form을 submit하는데 그 타겟을 iframe으로 돌리는 것이다. 아주 간단하다. 아래 사이트에는 그 개념을 그림으로 아주 쉽게 표현하고 있다.

http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/


: 사실 이는 AJAX가 아니다. AJAX를 통해 파일을 업로드하는 것을 IE에서 아직 지원하지 않기 때문에 비동기적으로 파일을 업로드하고 싶다면 이러한 편법을 써야하는 것이다. 이전에 썼던 글은 크롬, 파이어폭스, 오페라 등의 브라우저에서는 아주 잘 돌아갈것이다. 하지만 언제나 그렇듯 IE가 문제이다. 그럼 간단하게 한번 코딩해보자.


<!DOCTYPE html>

<html>

<head>

<script>

window.onload = function(){

document.getElementById("uploadForm").onsubmit = function(){

document.getElementById("uploadForm").target = "uploadIFrame";

}

document.getElementById("uploadIFrame").onload = function()

{

alert("파일 업로드 완료!");

}

}

</script>

</head>

<body>

<form id="uploadForm" method="post" enctype="multipart/form-data" action="upload.php">

<input name="uploadFile" id="uploadFile" type="file" />

<input type="submit" name="action" value="Upload" />

<iframe id="uploadIFrame" name="uploadIFrame" style="display:none;visibility:hidden"></iframe>

</form>

</body>

</html>


: 아주 간단하다. 위에 설명했던 것과 같이 iframe을 하나 숨겨놓고 form이 submit 될 때 target을 iframe으로 돌린 것이다. 그럼 iframe에는 onload 이벤트 콜백 함수를 설정해서 파일 업로드가 완료되었다는 처리를 해주면 된다.


: 이것만 쓰면 모든 브라우저에서 돌아가기는 할 것이다. 하지만 XMLHttpRequest의 onprogress라는 멋진 이벤트를 전혀 활용할 수 없게 된다. 따라서 이전에 짰던 소스와 지금의 소스를 합쳐서 IE 이외의 브라우저에서는 실제로 비동기적으로 XMLHttpRequest를 사용하게 하고, IE의 경우는 위와 같이 편법을 사용하도록 하면 될 것이다.


: 아래가 간단하게 XMLHttpRequest를 이용해서 실제 AJAX 비동기로 파일을 올리는 방법과 IE를 위해 위에 썼던 방법을 합친 예이다.




: IE 10부터는 실제로 XMLHttpRequest를 통해 파일을 업로드하는 것을 지원하겠지만, IE 9 이전 버전에서는 전부다 지원을 안하기 때문에 우리나라에서 파일 업로드를 비동기적으로 해야한다면 위의 방법이나, 어짜피 편법을 쓰는거 플래시 플러그인을 쓰는것도 방법일 것이다.


* 비동기로 파일 첨부하기 IE까지 지원하기 끝.



저작자표시 비영리 동일조건
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함